<template>
  <div class="user-page" v-if="userInfo && userInfo.uuid">
    <div class="bg" :style="styleObj">
      <div class="user-cover"></div>
    </div>
    <div class="box">
      <div class="top-card">
        <div class="user-bg" :style="styleObj">
          <div class="user-bg-cover"></div>
        </div>
        <div class="userinfo">
          <img :src="userInfo.avatar" class="avatar" />
          <p class="nickname">{{ userInfo.nickname }}</p>
          <p class="job">{{ userInfo.profession }}</p>
          <p class="intro double-line-ellipsis">{{ userInfo.intro }}</p>
        </div>
      </div>
      <mt-tabs v-model="activeTab" :list="tabList"></mt-tabs>
      <production
        v-if="activeTab === 0"
        :uuid="uuid"
        :list="works"
        v-app-jump="{ to: `mtjimu://homepage?uid=${userInfo.uuid}` }"
        :id="`production-${uuid}`"
      ></production>
      <!-- <material v-if="activeTab === 1" :uuid="uuid"></material> -->
      <baseinfo v-if="activeTab === 1" :uuid="uuid" :userInfo="userInfo"></baseinfo>
      <a
        class="open-app flex-align-center"
        id="app-btn"
        v-app-jump="{ to: `mtjimu://homepage?uid=${userInfo.uuid}` }"
      >
        打开积幕，查看更多
      </a>
      <p class="copyright">
        Copyright ©
        <span>{{ userInfo.nickname }}</span>
        . All Rights Reserved.
      </p>
      <share-btn></share-btn>
    </div>
  </div>
</template>

<script>
  import MtTabs from 'comp/MtTabs';
  import Baseinfo from './Baseinfo';
  import Production from './Production';
  // import Material from './Material';
  import ShareBtn from 'comp/ShareBtn.vue';
  import qs from 'qs';
  import dayjs from 'dayjs';

  export default {
    data() {
      return {
        userInfo: {},
        activeTab: 0,
        tabList: ['作品', '资料'],
        styleObj: {},
        works: [],
      };
    },
    components: {
      MtTabs,
      Baseinfo,
      Production,
      // Material,
      ShareBtn,
    },
    created() {},
    computed: {
      uuid() {
        const { id } = qs.parse(window.location.search.replace(/^\?/, ''));
        return id;
      },
    },
    mounted() {
      if (!this.$UA.isMobile) {
        window.location.href = 'https://jimu.movtile.com/space/' + this.uuid;
      }
      if (!this.uuid) return;
      this.getUserInfo();
      this.getUserWork();
      this.getBase();
    },
    methods: {
      getUserInfo() {
        const daylightImage = 'https://ketang-pub.movtile.com/res/daylight.jpg';
        const moonlightImage = 'https://ketang-pub.movtile.com/res/moonlight.jpg';
        const hours = dayjs().hour();
        let coverImage = moonlightImage;

        if (hours >= 5 && hours <= 19) {
          coverImage = daylightImage;
        }

        this.$service
          .UserInfoDetail({
            uuid: this.uuid,
          })
          .then((res) => {
            this.userInfo = { ...this.userInfo, ...res };
            document.title = res.nickname + '的积幕';
            if (coverImage) {
              this.styleObj = {
                'background-image': `url(${coverImage})`,
              };
            }
            wx.ready(() => {
              this.$setShareInfo(res.shareInfo);
            });
          })
          .catch((err) => {
            console.log(err);
            this.$Toast(err && err.data && err.data.message);
          });
      },
      getUserWork() {
        if (!this.uuid) return;
        this.$service
          .SquareUserWork({
            uuid: this.uuid,
            size: 6,
          })
          .then((res) => {
            this.works = res.rows;
            this.works.map((item) => {
              if (item.workType === 3) {
                item.imagesNum = item.images.length;
                this.$set(item, 'imagesNum', item.images.length);
                item.images = item.images.splice(0, 4);
              }
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getBase() {
        this.$service
          .UserInfoProfile({
            uuid: this.uuid,
          })
          .then((res) => {
            this.userInfo = { ...this.userInfo, ...res };
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
</script>
<style lang="less">
  html {
    background-color: #ffffff;
  }
</style>
<style lang="less" scoped>
  .user-page {
    padding: 4rem;
    // overflow: hidden;
    // min-height: 100vh;
    // max-height: 100vh;
    height: 100vh;
    overflow-y: scroll;
    position: relative;
    color: #ffffff;
    .bg {
      position: fixed;
      background-repeat: no-repeat;
      top: 0;
      bottom: 0;
      // left: 0;
      left: 50%;
      // right: 0;
      width: 85rem;
      overflow: hidden;

      z-index: -1;
      overflow: hidden;
      margin: -5rem -42.5rem;
      background-size: cover;
      background-position: center;
      .user-cover {
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      &:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba(#000000, 0.3);
        backdrop-filter: saturate(200%) blur(30px);
      }
    }
    .box {
      min-height: 100vh;
    }
    .top-card {
      border-radius: 0.3rem;
      overflow: hidden;
      margin-bottom: 4.5rem;
      position: relative;

      .user-bg {
        height: 86rem;
        background-position: top center;
        position: relative;
        background-size: 100%;
        border-radius: 2rem;
        overflow: hidden;
        .user-bg-cover {
          width: 100%;
          height: 20rem;
          background: linear-gradient(0deg, #111111 0%, rgba(17, 17, 17, 0) 100%);
          opacity: 0.42;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
      .userinfo {
        // background: rgba(0, 0, 0, 0.4);
        width: 100%;
        padding: 7.5rem 3.5rem 3.5rem;
        text-align: center;
        position: absolute;
        bottom: 30px;
        .avatar {
          position: absolute;
          top: -10.4rem;
          left: 50%;
          margin-left: -8rem;
          width: 16rem;
          height: 16rem;
        }
        .nickname {
          font-size: 4rem;
          font-weight: 800;
          margin-bottom: 1.5rem;
        }
        .job {
          font-size: 2.8rem;
          margin-bottom: 3rem;
        }
        .intro {
          font-size: 2.4rem;
          line-height: 4rem;
          min-height: 8rem;
          max-height: 8rem;
          opacity: 0.5;
          text-align: center;
        }
      }
    }

    .mt-tabs {
      display: flex;
      text-align: center;
      align-items: center;
      margin-bottom: 4rem;
      /deep/.mt-tab-item {
        flex: 1;
      }
    }

    .open-app {
      width: 67rem;
      height: 9.3rem;
      background: rgba(#000000, 0.5);
      box-shadow: 0rem 1.3rem 4rem 0rem rgba(4, 0, 0, 0.3);
      border-radius: 1.5rem;
      font-size: 2.8rem;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 5rem;
      margin-top: 4rem;
    }
    .copyright {
      font-size: 2.4rem;
      font-weight: 400;
      color: rgba(#ffffff, 0.5);
      text-align: center;
      margin: 5rem auto;
      span {
        font-weight: bold;
      }
    }
  }
</style>
